<template>
<div class="sidebar" :class="{'toggled' : toggled}">
	<div class="sidebar-inner">    
        <div class="profile-menu" @click="showUserInfo">
            <a href="javascript:void(0);">
                <slot name="headImg"></slot>
                <slot name="userName"></slot>
            </a>

            <ul class="main-menu" :class="{'show' : isShow}">
                <tree v-for="st in settings" :menu.sync="st"></tree>
            </ul>
        </div>
        <ul class="main-menu">
            <tree v-for="menu in menus" :menu.sync="menu"></tree>
        </ul>
    </div>
</div>
</template>

<script>
import Tree from './Tree'
export default {
  data () {
    return {
      open: false
    }
  },
  props: {
    toggled: {
      type: Boolean,
      default: false
    },
    isShow: {
      type: Boolean,
      default: false
    },
    settings: {
      type: Array
    },
    menus: {
      type: Array
    }
  },
  methods: {
    showUserInfo () {
      this.isShow = !this.isShow
    }
  },
  components: {
    Tree
  }
}
</script>

<style lang="less">
@import '../vendors/bootstrap/less/mixins';
@import '../less/sider-menu.less';

.show {
	display : block
}
</style>